在軟體開發中，最昂貴的浪費莫過於

工程師加班加點寫出程式碼，最後卻沒有人願意用。

為 NGO（非營利組織）打造場地與設備預約系統時，我們面臨的最大挑戰並非技術有多難，而是使用者的跨世代落差，舉例：一邊是習慣手機操作、講求快步調的 20 多歲青年職工；另一邊則是熱心服務、對數位工具帶有恐懼感與老花眼困擾的 60 多歲年長志工。

為了確保系統既具備工程嚴謹度，又能真正做到「以人為本（Human-Centered）」，我們引進了設計思考（Design Thinking）方法論。

一、 設計思考（Design Thinking）5 大階段與 30 天架構地圖

在展開具體的設計前，我們將經典的設計思考 5 大階段（Empathize 同理心 / Define 定義問題 / Ideate 創意發想 / Prototype 原型製作 / Test 測試驗證），全面映射到我們這 30 天的開發地圖中：

今天（Day 6），我們正處於 Prototype（原型製作） 的開端。我們要透過使用者旅程圖（User Journey Map），將前幾天蒐集到的同理心洞察，化為可被工程落實的邏輯。

二、 雙 Persona 使用者畫像：跨世代的極端需求

在繪製旅程圖前，我們先確立系統的兩個極端 Persona：

• Persona A：青年職工 【化名：Alex】 (25 歲)

• 背景： 負責籌辦青少年營隊，每天步調極快，習慣全程用手機處理公事。

• 痛點： 每次要借 A1 活動室跟投影機都要去查紙本登記簿，改期還要當面找志工，極度浪費時間；在手機上填表單最討厭跳出「對話框彈窗（Modal）」，因為軟鍵盤常壓住底部的按鈕。

• 期待： 打字或用語音輸入一句話（例如：「下週三下午借 A1 房和投影機 2 小時」）就能自動填好表單。

• Persona B：資深志工 【化名：阿康伯】 (68 歲)

• 背景： 退休後在 NGO 擔任值班志工，負責協助現場場地登記與借還管理。

• 痛點： 眼力不好（老花眼），看不懂 14:00 這種 24 小時制時間；害怕操作失誤踩壞系統，或因為彈窗層層覆蓋而迷失在頁面中。

• 期待： 字體要大、時間要標「下午 02:00」，且操作流程要像滑 WhatsApp / LINE 一樣單純向上垂直滾動。

三、 使用者旅程圖（User Journey Map）深度拆解

我們針對最具代表性的業務情境——「預約場地 | 臨時代訂/改期 | 現場核銷」，畫出 Alex 與阿康伯的情緒曲線與操作步驟：

情緒指數
 +2 (開心/順暢) |                                 [4. 內嵌卡片+AI帶入]          [7. Token自動折抵]
 +1 (滿意)     |                               /                            /
  0 (平淡)     | [1. 進入系統] -- [2. 查看看板]                             [6. 發放 Token]
 -1 (挫折)     |                               \                          /
 -2 (痛苦)     |                                [3. 時段衝突/鍵盤遮擋] -> [5. 迫不得已改期]

階段一：查詢與進入系統 (Entry & Discovery)

• 使用者行為： Alex 開啟手機網頁；阿康伯使用櫃檯的 iPad 登入系統。

• 觸點 (Touchpoints)： 首頁主看板日曆（Calendar Dashboard）。

• 情緒體驗：

• Alex 感到平淡（希望能快速看見場地空檔）。

• 阿康伯有些焦慮（擔心介面太複雜，找不到「下午」的時間）。

• HMW 洞察： 我們如何讓介面同時支援 12H（下午 02:00）與 24H（14:00）顯示，並用清晰文字直接標示 [空閒] 或 [已佔用]？

階段二：預約與填寫表單 (Booking & Input)

• 使用者行為： Alex 在手機上點擊「➕ 新增預約」展開內嵌表單；阿康伯幫臨訪民眾代訂。

• 觸點 (Touchpoints)： 手風琴內嵌展開卡片 (Inline Collapsible Card)。

• 情緒體驗：

• 舊系統常用彈窗（Modal），鍵盤升起時經常擋住「送出」按鈕，讓人極度抓狂（情緒 -2）。

• 改用頁面內向下展開卡片後，頁面隨鍵盤順暢上推，填表體驗大增（情緒 +2）。

• HMW 洞察： 如何徹底摒棄浮動彈窗，採用零彈窗頁面流（No-Modal Flow）？同時結合 Gemini AI 語意解析，讓 Alex 貼上一句話就自動帶入選單？

階段三：突發狀況與變更（Reschedule & Cancel）

• 使用者行為： 活動因雨取消，Alex 需要取消預約並釋出時段，同時希望保留額度於下個月補辦。

• 觸點 (Touchpoints)： 內嵌式改期令牌管理區塊 (Inline Token Panel)。

• 情緒體驗：

• 舊流程中，人工改期容易形成「人情套單」黑箱，讓人無所適從（情緒 -2）。

• HMW 洞察： 我們如何設計透明的「改期令牌（Reschedule Token）」機制？提前 24 小時取消自動核發 Token，並在內嵌面板中清楚顯示「剩餘效期」與「核銷選項」，讓改期過程公正不傷感情。

四、 從旅程圖提煉出 4 大 UI/UX 核心設計規範

透過這張旅程圖，我們將抽象的 HMW 提問收斂為明天【Day 7】Wireframe 原型製作的 4 大硬性 UI 規範：

1. 零彈窗頁面流（No-Modal Flow）： 為了照顧跨裝置與手機軟鍵盤輸入，全面摒棄浮動彈窗，所有新增與查詢表單皆採用「手風琴內嵌卡片（Inline Collapsible Card）」，點擊後於頁面順暢展開。
2. 雙時制切換開關（Time-Format Toggle）： 介面右上角設有全局開關，一鍵切換 12 小時制（含上下午標示） 與 24 小時制，滿足阿康伯與 Alex 的不同習慣。
3. 無障礙雙重狀態標示（Dual-Signaling）： 不單依靠顏色標示狀態。所有日曆格子必須標註文字（如：[可預約]、[維護中]），照顧色弱與高齡志工。
4. AI 語意與 Token 內嵌整合模組： 內嵌卡片頂部放置 Gemini 智慧輸入欄，底部整合 Reschedule Token 驗證與歷程管理，讓複雜的邏輯在一頁內完成。

五、 結語與明天預告

設計思考的精髓在於「先了解人，再設計系統」。

明天【Day 7】，我們將把這些 UI 規範落實為「Low-Fi Wireframe（低忠實度原型）」！